<template>
  <div class="step1">
    <a-form-model ref="form" :model="form" :rules="rules" :label-col="{span: 7}" :wrapper-col="{span: 17}">
      <a-row>
        <!-- 基本信息 -->
        <a-col :span="24">
          <div class="title">基本信息</div>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="从业状况">
                <a-input v-model="form.name" disabled />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="本人月经济收入(元)">
                <a-input-number style="width: 100%;" :min="0" v-model="form.income" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="家庭月经济收入(元)">
                <a-input-number style="width: 100%;" :min="0" v-model="form.familyIncome" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider dashed />
        </a-col>
        <!-- 就业安置 -->
        <a-col :span="24">
          <div class="title">就业安置</div>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="是否享受需要就业安置" :label-col="{span: 9}" :wrapper-col="{span: 15}" prop="isPlacement">
                <a-radio-group v-model="form.isPlacement" :options="sfxs" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="接受就业培训次数" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input-number style="width: 100%;" :min="0" v-model="form.acceptTrainNum" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="介绍就业次数" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input-number style="width: 100%;" :min="0" v-model="form.introduceNum" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="就业存在困难" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input v-model="form.employmentDifficult" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider dashed />
        </a-col>
        <!-- 落实低保 -->
        <a-col :span="24">
          <div class="title">落实低保</div>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="是否享受低保" :label-col="{span: 9}" :wrapper-col="{span: 15}" prop="isLow">
                <a-radio-group v-model="form.isLow" :options="sfxs" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="无法纳入低保原因" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input v-model="form.noLowReason" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider dashed />
        </a-col>
        <!-- 落实医保 -->
        <a-col :span="24">
          <div class="title">落实医保</div>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="是否享受医保" :label-col="{span: 9}" :wrapper-col="{span: 15}" prop="isMedical">
                <a-radio-group v-model="form.isMedical" :options="sfxs" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="无法纳入医保原因" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input v-model="form.noMedicalReason" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider dashed />
        </a-col>
        <!-- 解决子女上学 -->
        <a-col :span="24">
          <div class="title">解决子女上学</div>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="是否有未成年子女" :label-col="{span: 9}" :wrapper-col="{span: 15}" prop="isChildren">
                <a-radio-group v-model="form.isChildren" :options="sfxs" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="是否解决上学困难问题" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-radio-group v-model="form.isSchoolDifficult" :options="sfxs" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="无法解决上学原因" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input v-model="form.noSchoolReason" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider dashed />
        </a-col>
        <!-- 赡养父母 -->
        <a-col :span="24">
          <div class="title">赡养父母</div>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="是否存在赡养父母困难" :label-col="{span: 9}" :wrapper-col="{span: 15}"  prop="isParentDifficult">
                <a-radio-group v-model="form.isParentDifficult" :options="sfxs" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="赡养父母困难原因" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input v-model="form.parentReason" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider dashed />
        </a-col>
        <!-- 心理辅导 -->
        <a-col :span="24">
          <div class="title">心理辅导</div>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="是否需要并接受心理辅导" :label-col="{span: 9}" :wrapper-col="{span: 15}"   prop="isGuidance">
                <a-radio-group v-model="form.isGuidance" :options="xlfd" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="接受心理辅导次数" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input-number style="width: 100%;" :min="0" v-model="form.acceptGuidanceNum" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="未提供心理辅导原因" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input v-model="form.noGuidanceReason" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider dashed />
        </a-col>
        <!-- 住房问题 -->
        <a-col :span="24">
          <div class="title">住房问题</div>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="是否需要并解决住房问题" :label-col="{span: 9}" :wrapper-col="{span: 15}"  prop="isSolveHousing">
                <a-radio-group v-model="form.isSolveHousing" :options="xlfd" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="解决方式" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input v-model="form.solveWayHousing" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="未解决住房问题原因" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input v-model="form.noHousingReason" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider dashed />
        </a-col>
        <!-- 婚姻问题 -->
        <a-col :span="24">
          <div class="title">婚姻问题</div>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="婚姻情况" :label-col="{span: 9}" :wrapper-col="{span: 15}" prop="marriageSituation">
                <a-radio-group v-model="form.marriageSituation" :options="hyqk" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="是否存在问题" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-radio-group v-model="form.isQuestionMarriage" :options="sfxs" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="是否解决或未解决原因" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input v-model="form.reasonMarriage" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider dashed />
        </a-col>
        <!-- 法律援助 -->
        <a-col :span="24">
          <div class="title">法律援助</div>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="是否存在法律纠纷" :label-col="{span: 9}" :wrapper-col="{span: 15}"  prop="isDispute">
                <a-radio-group v-model="form.isDispute" :options="sfxs" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="解决方式" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                
                <a-select v-model="form.solveWayDispute">
                  <a-select-option :value="1">
                    经济纠纷
                  </a-select-option>
                  <a-select-option :value="2">
                    其他民事纠纷
                  </a-select-option>
                </a-select>
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="未解决原因" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input v-model="form.nreasonDispute" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider dashed />
        </a-col>
        <!-- 慰问帮扶 -->
        <a-col :span="24">
          <div class="title">慰问帮扶</div>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="是否接受过慰问帮扶" :label-col="{span: 9}" :wrapper-col="{span: 15}" prop="isHelp">
                <a-radio-group v-model="form.isHelp" :options="hyqk" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="接受次数" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input-number style="width: 100%;" :min="0" v-model="form.acceptNumHelp" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="存在困难" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input v-model="form.difficultHelp" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider dashed />
        </a-col>
        <!-- 其他问题 -->
        <a-col :span="24">
          <div class="title">其他问题</div>
          <a-row :gutter="20">
            <a-col :span="8">
              <a-form-model-item label="问题内容" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input v-model="form.questionOther" />
              </a-form-model-item>
            </a-col>
            <a-col :span="8">
              <a-form-model-item label="未解决原因" :label-col="{span: 9}" :wrapper-col="{span: 15}">
                <a-input v-model="form.reasonOther" />
              </a-form-model-item>
            </a-col>
          </a-row>
          <a-divider dashed />
        </a-col>

      </a-row>
    </a-form-model>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        form: {
          "acceptGuidanceNum": '',
          "acceptNumHelp": '',
          "acceptTrainNum": '',
          "delFlag": '',
          "difficultHelp": "",
          "employmentDifficult": "",
          "familyIncome": "",
          "income": "",
          "introduceNum": '',
          "isChildren": '',
          "isDispute": '',
          "isGuidance": '',
          "isHelp": '',
          "isLow": '',
          "isMedical": '',
          "isParentDifficult": '',
          "isPlacement": '',
          "isQuestionMarriage": '',
          "isSchoolDifficult": '',
          "isSolveHousing": '',
          "marriageSituation": "",
          "noGuidanceReason": "",
          "noHousingReason": "",
          "noLowReason": "",
          "noMedicalReason": "",
          "noSchoolReason": "",
          "nreasonDispute": "",
          "parentReason": "",
          "questionOther": "",
          "reasonMarriage": "",
          "reasonOther": "",
          "sjskPersonId": '',
          "solveWayDispute": "",
          "solveWayHousing": "",
        },
        rules: {
          isPlacement: {
            required: true,
            type: 'number',
            message: '请选择是否享受需要就业安置',
            trigger: ['blur']
          },
          isLow: {
            required: true,
            type: 'number',
            message: '请选择是否享受低保',
            trigger: ['blur']
          },
          isMedical: {
            required: true,
            type: 'number',
            message: '请选择是否享受医保',
            trigger: ['blur']
          },
          isChildren: {
            required: true,
            type: 'number',
            message: '请选择是否有未成年子女',
            trigger: ['blur']
          },
          isParentDifficult: {
            required: true,
            type: 'number',
            message: '请选择是否存在赡养父母困难',
            trigger: ['blur']
          },
          isGuidance: {
            required: true,
            type: 'number',
            message: '请选择是否需要并接受心理辅导',
            trigger: ['blur']
          },
          isSolveHousing: {
            required: true,
            type: 'number',
            message: '请选择是否需要并解决住房问题',
            trigger: ['blur']
          },
          marriageSituation: {
            required: true,
            type: 'number',
            message: '请选择婚姻情况',
            trigger: ['blur']
          },
          isDispute: {
            required: true,
            type: 'number',
            message: '是否存在法律纠纷',
            trigger: ['blur']
          },
          isHelp: {
            required: true,
            type: 'number',
            message: '是否接受过慰问帮扶',
            trigger: ['blur']
          },
        },
        sfxs: [{
            label: '是',
            value: 1
          },
          {
            label: '否',
            value: 2
          }
        ],
        xlfd: [{
            label: '是且已提供',
            value: 1
          },
          {
            label: '不需要',
            value: 2
          }
        ],
        hyqk: [{
            label: '未婚',
            value: 1
          },
          {
            label: '已婚',
            value: 2
          },
          {
            label: '离异',
            value: 3
          },
        ]
      }
    },
    methods: {
      validate() {
        return new Promise((reslove, reject) => {
          this.$refs.form.validate(res => {
            reslove(this.form)
          })
        })
      }
    }
  }
</script>

<style lang="less" scoped>
  .step1 {
    ::v-deep .title {
      font-weight: bold;
      margin-bottom: 20px;
    }
  }
</style>
